<template>
    <div id="map">
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <router-link to="/Carousel" class="swiper-slide">
                <img :src="arr[0]" alt="">
              </router-link >
              <div class="swiper-slide">
                <img :src="arr[1]" alt="">
                </div>
              <div class="swiper-slide">
                <img :src="arr[2]" alt="">
              </div>
              <div class="swiper-slide">
                <img :src="arr[3]" alt="">
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
      </div>
    </div>
</template>
<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import axios from 'axios';
export default {
    name:'Map',
    data() {
        return {
            arr:[
              
          ]
        }
    },
    methods: {
      aaGet(){
      axios.get('/api/small/commodity/v1/bannerShow').then(res=>{
        // console.log(res.data.result);
        let aa = res.data.result;
        for(var i = 0; i<aa.length;i++){
          this.arr.push(aa[i].imageUrl);
        }
      });
      // console.log(this.arr)
    }
    },
    mounted(){
   this.swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true
    });
     this.aaGet();
  },
}
</script>
<style >
 .swiper-container {
  width: 100%;
  height: 3rem;
}
.swiper-slide img{
  width: 100%;
  height: 100%;
}
.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: -10px;
    left: 0;
    width: 100%;
     margin: 5px 0;
}
</style>